<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {background-color:rgb(250,100,150)}
        p {color:blue}
    </style>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <meta name="description" content="免费 Web & 编程 教程">
    <base href="http://www.runoob.com/images/" target="_blank">
</head>
<body>
    <form action="http://localhost:8081/web2_war_exploded/hello"method="post">
        <input type="submit">
    </form>

    <!--标题-->
   <h1>
    第一个标题
    </h1>

    <!--段落-->
        <p>
    段落
    </p>

    <!--图片资源-->
<img loading="lazy" src="https://img.zcool.cn/community/01c6bb579b1c980000012e7e628ab6.jpg@1280w_1l_2o_100sh.jpg"
width="258"
height="258"
/>
<br/>
    <hr/>
    <div>早安，尚硅谷</div>
    我是&lt;br&gt;标签<br/>
    <!--连接-->
<a href="https://www.runoob.com/html/html-elements.html">菜鸟教程Html</a>

<!--标题-->
    <h1 align="left">标题 1</h1>
    <h2 align="center">标题 2</h2>
    <h3 align="right">标题 3</h3>
    <h4>标题 4</h4>
    <h5>标题 5</h5>
    <h6>标题 6</h6>
    <h7>标题 7</h7>

    <!-- a 标签是 超链接
    href 属性设置连接的地址
    target 属性设置哪个目标进行跳转
    _self 表示当前页面(默认值)
    _blank 表示打开新页面来进行跳转
    -->
    <a href="http://localhost:8080">百度</a><br/>
    <a href="http://localhost:8080" target="_self">百度_self</a><br/>
    <a href="http://localhost:8080" target="_blank">百度_blank</a><br/>


    <!--需求 1：使用无序，列表方式，把东北 F4，赵四，刘能，小沈阳，宋小宝，展示出来
    ul 是无序列表 有序ol
    type 属性可以修改列表项前面的符号
    li 是列表项
    -->
    <ul type="disc">
        <li>赵四</li>
        <li>刘能</li>
        <li>小沈阳</li>
        <li>宋小宝</li>
    </ul>

    <img src="image/1.jpg" alt="找不到"
         height="219"
         width="218"
    >


    <!--需求 1：做一个 带表头的 ，三行，三列的表格，并显示边框
    需求 2：修改表格的宽度，高度，表格的对齐方式，单元格间距。
    table 标签是表格标签
    border 设置表格标签
    width 设置表格宽度
    height 设置表格高度
    align 设置表格相对于页面的对齐方式cellspacing 设置单元格间距
    tr 是行标签
    th 是表头标签
    td 是单元格标签
    align 设置单元格文本对齐方式
    b 是加粗标签
    -->
    <table align="center" border="1" width="300" height="300" cellspacing="0">
        <tr>
            <th>1.1</th>
            <th>1.2</th>
            <th>1.3</th>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
    </table>



    <!-- 需求 1：
    新建一个五行，五列的表格，
    第一行，第一列的单元格要跨两列，
    第二行第一列的单元格跨两行，
    第四行第四列的单元格跨两行两列。
    colspan 属性设置跨列
    rowspan 属性设置跨行
    -->
    <table width="500" height="500" cellspacing="0" border="1">
        <tr>
            <td colspan="2">1.1</td>
            <td>1.3</td>
            <td>1.4</td>
            <td>1.5</td>
        </tr>
        <tr><td rowspan="2">2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
            <td>2.5</td>
        </tr>
        <tr>
            <td>3.2</td>
            <td>3.3</td>
            <td>3.4</td>
            <td>3.5</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
            <td>4.3</td>
            <td colspan="2" rowspan="2">4.4</td>
        </tr>
        <tr>
            <td>5.1</td>
            <td>5.2</td>
            <td>5.3</td>
        </tr>
    </table>
</body>
</html>